<!DOCTYPE html>
<html>
<head>
    <!--合拍榜单-->
    <meta charset="utf-8">
    <meta name="viewport"
          content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <title>合拍街</title>
    <link href="../css/style.css" rel="stylesheet" type="text/css"/>
    <link href="../iconfont/iconfont.css" rel="stylesheet" type="text/css"/>
    <style>
        .togPho {
            height: 45px;
        }

        .togPho li {
            width: 100%;
            position: relative;
        }

        .togPho li span:nth-child(1) {
            display: inline;
            font-style: normal;
            margin-left: 15px;
            margin-right: 6px;
            font-size: 0.875rem;
            color: #7a7a7a
        }

        .togPho li .creatBtn {
            display: inline-block;
            background: #ffb930;
            position: absolute;
            top: 7px;
            right: 6px;
            line-height: 14px;
            padding: 8px 8px;
            border-radius: 3px;
            color: white;
            font-weight: 100;
        }

        .togPho li .creatBtn i {
            vertical-align: middle;
            margin-right: 4px
        }

        .togPho li .creatBtn span {
            display: inline;
            font-size: 0.875rem;
            border: none
        }

        .togPho li .creatNum {
            font-style: normal;
            font-size: 12px;
            background: #f45272;
            padding: 3px 8px;
            color: #fff;
            border-radius: 3px;
        }

        .togPhoList li:nth-child(1) {
            height: 45px;
            font-size: 0.875rem;
            line-height: 45px;
            color: #7a7a7a
        }

        .togPhoList li:nth-child(1) i {
            margin-left: 15px;
            margin-right: 6px;
            vertical-align: middle
        }

        .togPhoList li {
            position: relative
        }

        .togPhoList li .txt-box .care-about {
            position: absolute;
            right: 15px;
            font-size: 0.75rem;
            color: #ffb930
        }

        .togPhoList li .txt-box .care-about i {
            vertical-align: middle;
        }

        .togPhoList li .txt-box .tog-pho-title a {
            color: black;
        }

        .togPhoList li .txt-box .tog-pho-con {
            font-size: 0.75rem;
            margin-top: 10px
        }

        .togPhoList li .txt-box .zan {
            font-size: 0.75rem;
            margin-right: 10px
        }

        .togPhoList li .txt-box .zan-num {
            color: #f45272
        }

        .togPhoList li .txt-box .collect {
            font-size: 0.75rem
        }

        .togPhoList li .txt-box .collect-num {
            color: #ffb930
        }

    </style>
</head>

<body>
<header id="header">
    <a href="#" class="iconfont fl">&#xe63f;</a>
    <div class="title">合拍榜单</div>
    <a href="#" class="iconfont fr">&#xe6a0;</a>
</header>
<div class="content">
    <div class="top-nav">
        <ul class="togPho">
            <li>
                <span>我创建的摄影主题</span>
                <i class="creatNum">5</i>
                <a href="new.html" class=" creatBtn">
                    <i class="iconfont">&#xe61d;</i>
                    <span>创建新主题</span>
                </a>
            </li>
        </ul>
    </div>
    <div class="column imgtxt-list">
        <div class="con-list">
            <ul class="togPhoList">
                <li><i class="iconfont">&#xe600;</i>热门摄影主题</li>
                <li>
                    <div class="li-box clearfix">
                        <a href="detail.html" class="img fl"><img src="../images/user.png"></a>
                        <div class="txt-box">
                            <span class="care-about"><i class="iconfont">&#xe600;</i>关注</span>
                            <p class="tog-pho-title"><a href="detail.html">私房约拍</a></p>
                            <p class="tog-pho-con">私房作品分享，约拍，私房作品分享，约拍，私房作品分享，约拍</p>
                            <div class="info clearfix fr">
                                <span class="zan"><span class="zan-num">298</span>人关注</span>
                                <span class="collect"><span class="collect-num">98</span>条约拍</span>
                            </div>
                        </div>
                    </div>
                </li>

                <li>
                    <div class="li-box clearfix">
                        <a href="detail.html" class="img fl"><img src="../images/user.png"></a>
                        <div class="txt-box">
                            <span class="care-about"><i class="iconfont">&#xe600;</i>关注</span>
                            <p class="tog-pho-title"><a href="detail.html">私房约拍</a></p>
                            <p class="tog-pho-con">私房作品分享，约拍，私房作品分享，约拍，私房作品分享，约拍</p>
                            <div class="info clearfix fr">
                                <span class="zan"><span class="zan-num">298</span>人关注</span>
                                <span class="collect"><span class="collect-num">98</span>条约拍</span>
                            </div>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="li-box clearfix">
                        <a href="detail.html" class="img fl"><img src="../images/user.png"></a>
                        <div class="txt-box">
                            <span class="care-about"><i class="iconfont">&#xe600;</i>关注</span>
                            <p class="tog-pho-title"><a href="detail.html">私房约拍</a></p>
                            <p class="tog-pho-con">私房作品分享，约拍，私房作品分享，约拍，私房作品分享，约拍</p>
                            <div class="info clearfix fr">
                                <span class="zan"><span class="zan-num">298</span>人关注</span>
                                <span class="collect"><span class="collect-num">98</span>条约拍</span>
                            </div>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="li-box clearfix">
                        <a href="detail.html" class="img fl"><img src="../images/user.png"></a>
                        <div class="txt-box">
                            <span class="care-about"><i class="iconfont">&#xe600;</i>关注</span>
                            <p class="tog-pho-title"><a href="detail.html">私房约拍</a></p>
                            <p class="tog-pho-con">私房作品分享，约拍，私房作品分享，约拍，私房作品分享，约拍</p>
                            <div class="info clearfix fr">
                                <span class="zan"><span class="zan-num">298</span>人关注</span>
                                <span class="collect"><span class="collect-num">98</span>条约拍</span>
                            </div>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</div>

<footer id="footer" class="foot">
    <ul>
        <li>
            <a class="home" href="../index.html">
                <p>首页</p>
            </a>
        </li>
        <li>
            <a class="find" href="../find/index.html">
                <p>发现</p>
            </a>
        </li>
        <li class="active">
            <a class="camera" href="index.html">
                <p>合拍榜</p>
            </a>
        </li>
        <li>
            <a class="person" href="../user/user_login.html">
                <p>我的</p>
            </a>
        </li>
    </ul>
</footer>
</body>
</html>
